<template>
  <el-dialog v-model="deleteVisible" width="50%" title="日志" align-center @close="cancel"
    :close-on-click-modal="false">
    <div class="content mx-[8px]">
      <div>
        <vxe-table :data="tableData" :round="true" border height="400">
          <vxe-column field="create_time" title="日期" width="170px"></vxe-column>
          <vxe-column field="create_user_text" title="人员" width="170px"></vxe-column>
          <vxe-column field="op_content" title="操作内容" minWidth="200px">
            <template #default="{ row }">
              <div v-html="row.op_title + ' | ' + row.op_content"> </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <vxe-pager v-model:current-page="page.pageNum" v-model:page-size="page.pageSize" :total="page.totalResult"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
        @page-change="pageChange">
      </vxe-pager>
    </div>
    <template #footer>
        <el-button @click="cancel">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="VRole">
import { reactive, toRefs } from 'vue'
const emits = defineEmits(['cancel'])
// 声明接收参数
const props = defineProps({
  api: { type: Function, default: () => ([]) },
  options: { type: String, default: 'id' }
})
const data = reactive({
  deleteVisible: false,
  page: {
    pageNum: 1,
    pageSize: 10,
    totalResult: 0
  },
  tableData: [],
  ids: 0
})
const { deleteVisible, page, tableData, ids } = toRefs(data)
const { api, options } = toRefs(props)
const open = (id) => {
  ids.value = id
  const obj = {}
  obj[options.value] = id
  api.value(obj).then(res => {
    tableData.value = res.data
    page.value.totalResult = res.total
  })
  deleteVisible.value = true
}
const cancel = () => {
  deleteVisible.value = false
  emits('cancel')
}
//分页
const pageChange = () => {
  api.value({ id: ids.value, pageSize: page.value.pageSize, pageNum: page.value.pageNum }).then((res) => {
    tableData.value = res.data
    page.value.totalResult = res.total
  })
}
defineExpose({
  open, data, cancel
})
</script>
<style lang="scss" scoped>
</style>